<template>
	<view class="pages">
		<view class="main">
			<view class="title">
				<text>想认识的类型</text>
			</view>
			<view class="u-flex u-flex-wrap radio_list">
				<!-- {{formData[radio_sex_list.fieldName]}} -->
				<template v-for="item in radio_sex_list.arr">
					<yy-radio :width="radio_sex_list.width" :height="radio_sex_list.height" :config="item"
						:list="radio_sex_list.arr" :mode="radio_sex_list.mode"
						v-model="formData[radio_sex_list.fieldName]" @change="change"></yy-radio>
				</template>
			</view>

			<view class="title">
				<text>婚姻状况(可多选)</text>
			</view>
			<view class="u-flex u-flex-wrap radio_list">
				<template v-for="item in radio_marriage_list.arr">
					<yy-radio :mode="radio_marriage_list.mode" :width="radio_marriage_list.width"
						:height="radio_marriage_list.height" :config="item"
						v-model="formData[radio_marriage_list.fieldName]" :list="radio_sex_list.arr" @change="change1">
					</yy-radio>
				</template>
			</view>
			<view class="u-flex u-flex-content-between u-flex-between title">
				<text>年龄</text>
				<text>{{age_Value[0]}}-{{age_Value[1]}}岁</text>
			</view>
			<view class="slider_pd">
				<cj-slider height="10" activeColor="linear-gradient(180deg, #FF701A, #FF7612)" inactiveColor="#F5F6F8"
					v-model="age_Value" :min="18" :max="50" :step="1" :blockWidth="40" @start="blockStart"
					@moving="blockMoving" @end="blockEnd" moveHeight="0" />
			</view>
			<view class="u-flex u-flex-content-between u-flex-between title">
				<text>身高</text>
				<text>{{height_Value[0]}}cm-{{height_Value[1]}}cm</text>
			</view>
			<view class="slider_pd">
				<cj-slider height="10" activeColor="linear-gradient(180deg, #FF701A, #FF7612)" inactiveColor="#F5F6F8"
					v-model="height_Value" :min="140" :max="229" :step="1" :blockWidth="40" @start="blockStart"
					@moving="blockMoving" moveHeight="0" @end="blockEnd" />
			</view>
			<u--form labelPosition="left" :model="model" ref="form1">
				<u-form-item label="" labelWidth="auto" prop="userInfo.name"
					:borderBottom='index==filter_list.length-1?false:true' ref="item1"
					v-for="(item,index) in filter_list" :key="index">
					<!-- <view class="table_right">
						<text>{{formData[item.fieldName]}}</text>
					</view> -->
					
					<yy-screen @change_value="change_value" v-model="formData[item.fieldName]" ref="child"
						:config='item'>
					</yy-screen>
					<!-- <image src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E9%80%89%E6%8B%A9%20%E6%8B%B7%E8%B4%9D%2034.png" 	class="icon_right"></image> -->
				</u-form-item>
			</u--form>
		</view>
		<view class="pd_btn" @click="startScreening">
			<u-button class="custom-style" text="开始筛选"></u-button>
		</view>

	</view>
</template>

<script>
	// import {getUserInfo} from '@/common/api.js'
	export default {
		data() {
			return {
				model: {
					userInfo: {
						// name:'',
						// sex:''
					}

				},
				step: 2,
				disabled: false,
				age_Value: [18, 50],
				height_Value: [140, 229],
				filter_list: [{
					title: '学历(可多选)',
					modality: 'multipleSelection',
					name: '学历',
					fieldName: 'education',
					is_show: false,
					is_audit: 1,
					array: [{
						name: '大专以下',
						is_select: false
					}, {
						name: '大专',
						is_select: false
					}, {
						name: '本科',
						is_select: false
					}, {
						name: '硕士',
						is_select: false
					}, {
						name: '博士',
						is_select: false
					}]
				}, {
					title: '现居地(可多选)',
					modality: 'multipleSelectionAddress',
					name: '现居地',
					fieldName: 'nhArea',
					is_show: false,
					is_audit: 1,
					defaultIndex: [0, 0, 0],
					is_audit: 2,
					array: [],
					brray: []
				}, {
					title: '籍贯(可多选)',
					modality: 'multipleSelectionAddress',
					name: '籍贯(可多选)',
					fieldName: 'jgArea',
					is_show: false,
					is_audit: 1,
					defaultIndex: [0, 0, 0],
					is_audit: 2,
					array: [],
					brray: []
				}, {
					title: '职业性质(可多选)',
					modality: 'multipleSelection',
					name: '职业性质',
					fieldName: 'occupation',
					is_show: false,
					is_audit: 1,
					array: [{
						name: '正式',
						is_select: false
					}, {
						name: '非正式',
						is_select: false
					}]
				}, {
					title: '房产情况(可多选)',
					modality: 'multipleSelection',
					name: '房产情况',
					fieldName: 'housingSituation',
					is_show: false,
					is_audit: 1,
					array: [{
						name: '暂时无房',
						is_select: false
					}, {
						name: '有房',
						is_select: false
					}, {
						name: '有房(城区)',
						is_select: false
					}]
				}, {
					title: '车辆情况(可多选)',
					modality: 'multipleSelection',
					name: '车辆情况',
					fieldName: 'carPurchase',
					is_show: false,
					is_audit: 1,
					array: [{
						name: '暂无代步车',
						is_select: false
					}, {
						name: '有代步车',
						is_select: false
					}, {
						name: '有代步车(BBA及以上)',
						is_select: false
					}]
				}, {
					title: '爱喝酒情况(可多选)',
					modality: 'multipleSelection',
					name: '爱喝酒情况(可多选)',
					fieldName: 'likeDrink',
					is_show: false,
					is_audit: 1,
					array: [{
						name: '不爱喝酒',
						is_select: false
					}, {
						name: '偶尔小酌',
						is_select: false
					}, {
						name: '爱喝酒',
						is_select: false
					}, {
						name: '仅应酬时喝',
						is_select: false
					}]
				}, {
					title: '抽烟情况(可多选)',
					modality: 'multipleSelection',
					name: '抽烟情况(可多选)',
					fieldName: 'canSmoke',
					is_show: false,
					is_audit: 1,
					array: [{
						name: '不抽烟',
						is_select: false
					}, {
						name: '偶尔抽烟',
						is_select: false
					}, {
						name: '经常抽烟',
						is_select: false
					}, {
						name: '仅应酬时抽',
						is_select: false
					}]
				}, {
					title: '宗教(可多选)',
					modality: 'multipleSelection',
					name: '宗教(可多选)',
					fieldName: 'religion',
					is_show: false,
					is_audit: 1,
					array: [{
						name: '无',
						is_select: false
					}, {
						name: '佛教',
						is_select: false
					}, {
						name: '基督教',
						is_select: false
					}, {
						name: '其他',
						is_select: false
					}]
				}],

				radio_marriage_list: {
					height: 75,
					width: 148,
					fieldName: 'maritalStatus',
					mode: 'multipleSelection',
					arr: [{
						name: '未婚',
					}, {
						name: '离异未育',
					}, {
						name: '离异带孩',
					}, {
						name: '丧偶',
					}, {
						name: '离异不带孩',
					}, {}, {}]
				},
				radio_sex_list: {
					height: 75,
					width: 202,
					fieldName: 'sex',
					mode: 'singleOption',
					arr: [{
						name: '男',
					}, {
						name: '女',
					}, {
						name: '不限',
					}]
				},
				formData: {
					carPurchase: '',
					sex: '男',
					education: '',
					occupation: '',
					canSmoke: '',
					likeDrink: '',
					housingSituation: '',
					jgArea: '',
					nhArea: '',
					maritalStatus: '',
					minHeight: '',
					maxHeight: '',
					minAge: '',
					maxAge: '',
					page: 1,
					perPage: 10,
					count: 0,
					religion:''
				},
				user_info: {}	
			}
		},
		watch: {
			age_Value: {
				handler(value) {
					console.log('深度监听', value)
				},
				deep: true // 深度监听
			},
			height_Value: {
				handler(value) {
					// console.log('深度监听', value)
				},
				deep: true // 深度监听
			}
		},
		onLoad(option) {

			if (option.formData) {
				this.formData = JSON.parse(option.formData)
				this.age_Value=[this.formData.minAge,this.formData.maxAge],
				this.height_Value=[this.formData.minHeight,this.formData.maxHeight],
				console.log(this.age_Value)
				console.log(this.height_Value)
			}
		},
		methods: {	
		 startScreening() {

				this.formData.minHeight = this.height_Value[0]
				this.formData.maxHeight = this.height_Value[1]
				this.formData.minAge = this.age_Value[0]
				this.formData.maxAge = this.age_Value[1]
				var pages = getCurrentPages(); //当前页
				var beforePage = pages[pages.length - 2]; //上个页面
				this.formData.page = 1
				console.log(this.formData)
				// #ifdef H5
				console.log(beforePage)
				beforePage._data.proData = []
				beforePage._data.count = 0
				beforePage._data.isRefresh=false
				beforePage._data.formData = this.formData
				// beforePage.onSearch()
				// #endif
				// #ifndef H5
				beforePage.$vm._data.proData = []
				beforePage.$vm._data.count = 0
				beforePage.$vm._data.formData = this.formData
				beforePage.$vm._data.isRefresh=false
				// beforePage.$vm.onSearch()
				// #endif
				setTimeout(() => {
					uni.navigateBack()
				}, 500)	
			},
			change(e) {
				let {
					arr
				} = this.radio_sex_list
				this.radio_sex_list.arr = arr.map(item => {
					if (e.name == item.name) {
						item.is_select = true
					} else {
						item.is_select = false
					}
					return item
				})
			},
			change1(e) {
				let {
					arr
				} = this.radio_marriage_list

				this.radio_marriage_list.arr = arr.map(item => {
					if (e.name == item.name) {
						item.is_select = e.is_select
					}
					return item
				})
			},
			blockStart() {
				// console.log('滑动触发')
			},
			blockMoving() {
				// console.log('正在滑动中')
			},
			blockEnd(e) {
				console.log('滑动结束', this.priceValue)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		padding: 24rpx 24rpx 0 24rpx;
		box-sizing: border-box;

		.main {
			padding: 0 32rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;

			.title {
				padding: 39rpx 0;
				box-sizing: border-box;

				text {
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #111111;
				}
			}

			.slider_pd {
				padding: 0 20rpx 20rpx 20rpx;
				box-sizing: border-box;
			}

			.radio_list {
				align-items: center;
				justify-content: space-between;
				align-content: flex-start;
			}

			/deep/ .cell {
				padding: 0;
			}

			/deep/ .u-form-item__body__right__content {
				width: 100%;
			}

			/deep/ .u-form-item__body {
				padding: 0;
			}

			/deep/ .u-form-item__body__right {
				align-items: flex-end;
			}

			.table_right {
				text-align: right
			}
		}

		.pd_btn {
			// position: fixed;
			// bottom:46rpx;
			// left: 24rpx;
			// right:24rpx;
			padding: 46rpx 0;
			box-sizing: border-box;

			.custom-style {

				background: #FF7612;
				color: #fff;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 46rpx;
			}
		}


	}
</style>
